<template>
  <div class="navbar">
    <div class="logo"></div>
    <div class="title" @click="toHome" :class="{'choose': this.$store.state.choose==='home'}">首页</div>
    <div class="title" @click="toDiscuss" :class="{choose: this.$store.state.choose==='discuss'}">讨论区</div>
    <div class="title" @click="toJob" :class="{choose: this.$store.state.choose==='job'}">求职</div>
    <div class="title" @click="toResume" :class="{'choose': this.$store.state.choose==='resume'}">我的简历</div>
    <el-button v-if="!isLogin" class="loginBtn" @click="toLogin">登录/注册</el-button>
    <div v-else class="avatar" @mouseenter="avatarMouseOver" @mouseleave="avatarMouseLeave">
      <img :key="imgkey" v-if="JSON.stringify(userInfo)!=='{}'" :src="userInfo.avatar_url ? userInfo.avatar_url + `?tempid=${Math.random()}`: userInfo.sex ===1 ? '../../static/defaultAvatar1.jpeg' : '../../static/defaultAvatar2.jpeg'" alt="" >
      <!--悬浮下拉框-->
      <div class="downBox" v-if="hoverAvatar">
        <div class="boxItem">{{userInfo.name}}</div>
        <div class="experienceBox">
          <span :style="{color: this.levelColor[level(userInfo.experience).level]}">Lv.{{level(userInfo.experience).level}}</span>
          <el-progress :color="this.levelColor[level(userInfo.experience).level]" :show-text="false" :percentage="(userInfo.experience / level(userInfo.experience).totalExperience) * 100"></el-progress>
          <span :style="{color: this.levelColor[level(userInfo.experience).level+1]}">Lv.{{level(userInfo.experience).level + 1}}</span>
        </div>
        <div class="line"></div>
        <!--粉丝关注模块-->
        <div class="fans">
          <div class="fansItem" @click="toFans">
            <div class="number">{{this.userInfo.fans}}</div>
            <div class="description">
              粉丝
            </div>
          </div>
          <div class="fansItem" @click="toFocus">
            <div class="number">{{this.userInfo.focus}}</div>
            <div class="description">
              关注
            </div>
          </div>
          <div class="fansItem">
            <div class="number">{{this.userInfo.praise}}</div>
            <div class="description">
              获赞
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="iconItem" @click="toProfile">
          <span class="iconfont icon-morentouxiang"></span>
          <span>个人中心</span>
        </div>
        <div class="iconItem" @click="toSetting">
          <span class="iconfont icon-shezhi"></span>
          <span>账户设置</span>
        </div>
        <div class="iconItem" @click="toMyMoment">
          <span class="iconfont icon-dongtai"></span>
          <span>我的动态</span>
        </div>
        <div class="line"></div>
        <div class="iconItem" @click="exit">
            <span class="iconfont icon-tuichu"></span>
            <span>退出</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import level from '../utils/level'
import levelColor from '../constant/levelColor'
export default {
  data () {
    return {
      levelColor,
      imgkey: true,
      isLogin: false,
      hoverAvatar: false,
      userInfo: {}
    }
  },
  mounted () {
    this.$bus.$on('login', () => {
      this.isLogin = true
      this.hoverAvatar = false
      this.userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
      this.getUserInfo()
    })
  },
  created () {
    this.$bus.$on('avatarChange', () => {
      this.imgkey = !this.imgkey
    })
    if (window.sessionStorage.getItem('token')) {
      this.isLogin = true
    } else {
      this.isLogin = false
    }
    this.$bus.$on('exit', () => {
      this.isLogin = false
    })
    if (window.sessionStorage.getItem('userInfo')) {
      this.getUserInfo()
    }
  },
  methods: {
    toFans () {
      this.$router.push({path: '/profile/focus', query: {tab: 'fans'}})
    },
    toFocus () {
      this.$router.push({path: '/profile/focus', query: {tab: 'focus'}})
    },
    toMyMoment () {
      this.$bus.$emit('profile', 3)
      this.$router.push('/profile/mymoment')
    },
    toLogin () {
      this.$router.push('/login')
    },
    toHome () {
      this.$router.push('/home')
    },
    toJob () {
      this.$router.push('/job')
    },
    toResume () {
      this.$router.push('/resume')
    },
    async getUserInfo () {
      const userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
      const res = await this.$http.get(`users/${userInfo.id}`)
      this.userInfo = res.data
    },
    async avatarMouseOver () {
      this.hoverAvatar = true
      this.getUserInfo()
    },
    avatarMouseLeave () {
      this.hoverAvatar = false
    },
    exit () {
      this.$router.push('/login')
      this.isLogin = false
      window.sessionStorage.removeItem('token')
      window.sessionStorage.removeItem('userInfo')
      window.localStorage.removeItem('token')
      window.localStorage.removeItem('userInfo')
    },
    toProfile () {
      this.$router.push('/profile/home')
      this.$bus.$emit('profile', 0)
    },
    toDiscuss () {
      this.$router.push('/discuss')
    },
    toSetting () {
      this.$router.push('/profile/account')
      this.$bus.$emit('profile', 2)
    },
    level
  }
}
</script>

<style scoped>
  .experienceBox {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    align-items: center;
  }
  .experienceBox .el-progress {
      flex: 1;
      padding: 0 5px;
    }
  .logo{
    background-color: #5a9cf8;
    width: 200px;
    height: 100%;
    margin-right: 30px;
  }
  .navbar{
    position: fixed;
    display: flex;
    top:0;
    height: 60px;
    min-height: 60px;
    background-color: #ffffff;
    width:100%;
    box-sizing: border-box;
    align-items: center;
    padding: 0 20px;
    z-index:999;
  }
  .navbar .title{
    box-sizing: border-box;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    flex-shrink: 1;
  }
  .navbar .title:hover{
    background-color: #f0f0f5;
    cursor: pointer;
  }
  .loginBtn{
    position: relative;
    left: 40%;
    background-color: #5a9cf8;
    border-radius: 10px;
    color: #fff;
  }
  .choose{
    background-color: #f0f0f5;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .choose::before{
    position: absolute;
    display: block;
    content: '';
    background-color: #5a9cf8;
    height: 5px;
    width: 50px;
  }
  .avatar{
    position: relative;
    left: 40%;
    display: flex;
    align-items: center;
    height: 60px;
    justify-content: center;
  }
  .avatar img{
    position: relative;
    z-index: 500;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
  }
  .avatar:hover img{
    transform: scale(2);

  }
  .downBox{
    position: absolute;
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    width: 300px;
    height:400px;
    top: 50%;
    background-color: #fff;
    align-items: center;
    overflow: hidden;
    box-shadow:#888888 0px 0px 10px ;
  }
  .line{
    width: 100%;
    height: 1px;
    background-color: #eee;
    margin: 10px 0;
  }
  .boxItem{
    margin: 5px 0;
  }
  .iconItem{
    width: 100%;
    cursor: pointer;
    align-self: flex-start;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
  }
  .iconItem:hover{
    background-color: #f0f0f5;
  }
  .fans{
    box-sizing: border-box;
    width: 100%;
    display: flex;
    padding: 0 30px;
    justify-content: space-between;
  }
  .fans .fansItem{
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }
  .fansItem .number{
    font-size:20px;
    height: 30px;
    line-height: 30px;
    font-weight: 600;
    color: #222226;
    letter-spacing: 2px;
    margin-bottom: 5px;
  }
  .fansItem .description{
    color: #999aaa;

  }
</style>
